

<template>
  <!-- 面包屑 -->
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>记录查询</el-breadcrumb-item>
      <el-breadcrumb-item><b>报到打卡记录</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!--  数据表格-->
  <div style="margin:20px">
    <el-table :data="arriveInfo" stripe border style="width: 100%">
      <el-table-column prop="sid" label="学号" />
      <el-table-column prop="user" label="姓名"/>
      <el-table-column prop="time" label="报到时间"/>
    </el-table>
  </div>
  <!--  分页-->
  <div class="page">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5,8]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup>

import {ArrowRight, Delete, Edit} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import request from "../../../utils/freshman";
onMounted(()=>{
  getArrive();
})
const arriveInfo=ref([])

//分页
const currentPage = ref(1)
const pageSize = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let totals=ref(0);
const getArrive=()=>{
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    // 初始时不包含其他参数
  };
  request({
    url:'/card/all',
    method:'get',
    params
  }).then(req=>{
    if (req.data.errorCode==200){
      arriveInfo.value=req.data.data.records
      totals.value=req.data.data.total;
    }
  })
}

const handleSizeChange = (val) => {
  pageSize.value=val;
  getArrive()
}
const handleCurrentChange = (val) => {
  currentPage.value=val;
  getArrive()
}
</script>
<style scoped>
.el-breadcrumb{
  font-size: 18px;
  margin: 20px;
}
.page{
  margin-left: 30%;
}
</style>